<template>
	<view class="container">
		<!-- 空盒子用来防止消息过少时 拉起键盘会遮盖消息 -->
		<view :animation="anData" style="height: 0px;">

		</view>
		<scroll-view scroll-with-animation scroll-y="true" @touchmove="hideKey" style="width: 750rpx;"
			:style="{'height':srcollHeight}" :scroll-top="go">
			<!-- 用来获取消息体高度 -->
			<view id="okk" scroll-with-animation>
				<!-- 消息模板 -->
				<view style="padding: 30rpx;">
					<view style="border-radius: 35rpx;background-color: #fff;padding: 30rpx;">
						<text style="word-break: break-all;font-size: 28rpx;" >{{ msgTemplate.title }}</text>
						<view>
							<view class="flex-column-start" style="color: #007AFF;padding-bottom: 30rpx;">
								<text @click="answer(item)" style="margin-top: 30rpx;font-size: 28rpx;word-break: break-all;" v-for="(item,index) in msgTemplate.problemTypeList"
									:key="index">{{index + 1 + '. '}}{{item.typeName}}</text>
							</view>
							<view class="flex-row-between padding-top-sm border-top" v-if="problemTypePage.pages > 1">
								<view></view>
								<view class="flex-row-center" style="color: #007AFF;font-size: 28rpx;" @click="problemTypePageChange">
									<image src="../../static/icon_refresh.png" style="width: 40rpx;height: 40rpx;"></image>
									换一批
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 消息 -->
				<view class="flex-column-start" v-for="(x,i) in msgList" :key="i">
					<!-- 机器人消息 -->
					<view v-if="!x.my" class="flex margin-left margin-top one-show">
						<view class="chat-img flex-row-center">
							<image style="height: 100%;width: 100%;" src="../../static/icon_logo.png" mode="aspectFit"></image>
						</view>
						<view class="flex-column-start" style="width: 500rpx;margin-top: 12rpx;margin-left: 20rpx;">
							<view class="padding-chat bg-white" style="border-radius: 15rpx;" v-if="x.type == 0">
								<view class="flex-column-start">
									<text class="an-title">{{ x.list[0].problem }}</text>
									<text class="an-info">{{ x.list[0].profile }}</text>
									<view @click="toDetail(x.list[0])" class="an-btn">查看详情</view>
								</view>
							</view>
							<view class="padding-chat bg-white" style="border-radius: 15rpx;" v-if="x.type == 1">
								<view style="word-break: break-all;font-size: 28rpx;">{{ msgTemplate.title }}</view>
								<view class="flex-column-start" style="color: #007AFF;padding-bottom: 30rpx;">
									<text @click="onProblem(item)" style="margin-top: 30rpx;font-size: 28rpx;word-break: break-all;" v-for="(item,index) in x.list"
										:key="index"><text v-if="x.list.length > 1">{{index + 1 + '. '}}</text>{{item.problem}}</text>
								</view>
								<view class="flex-row-between padding-top-sm border-top" v-if="x.pages > 1">
									<view></view>
									<view class="flex-row-center" style="color: #007AFF;font-size: 28rpx;" @click="problemPageChange(x, i)">
										<image src="../../static/icon_refresh.png" style="width: 40rpx;height: 40rpx;"></image>
										换一批
									</view>
								</view>
							</view>
							<view class="padding-chat bg-white" style="border-radius: 15rpx;" v-if="x.type == 2">
								<text style="word-break: break-all;font-size: 28rpx;">
									很抱歉，未能找到您的问题，详细请联系业务人员解答<text v-if="x.serviceInfo.customerTel">或拨打客服热线</text> 
								</text>
								<view class="" v-if="x.serviceInfo.customerTel">
									<view class="flex align-center" style="padding: 20rpx 0" @click="onCallPhone">
										<image src="../../static/icon-phone-circle.png" style="width: 60rpx;height: 60rpx;flex-shrink: 0;"></image>
										<view style="margin-left: 20rpx;flex: 1;">
											<text style="word-break: break-all;font-size: 28rpx;color: #333;">客服电话：{{ x.serviceInfo.customerTel }}</text>
										</view>
										<uni-icons type="right" color="#ccc" size="25"></uni-icons>
									</view>
									<view class="flex border-top" style="padding: 20rpx 0">
										<image src="../../static/icon-time-circle.png" style="width: 60rpx;height: 60rpx;flex-shrink: 0;"></image>
										<view style="margin-left: 20rpx;margin-top: 12rpx;">
											<text style="word-break: break-all;font-size: 28rpx;color: #333;">工作时间：{{ x.serviceInfo.workingHour }}</text>
										</view>
									</view>
								</view>
							</view>
							<view class="my-neirong-sm padding-top-sm">
								{{ x.time }}
							</view>
						</view>
					</view>
					<!-- 我的消息 -->
					<view v-if="x.my" class="flex justify-end margin-right one-show align-start margin-top">
						<view class="flex-column-start align-end"  style="width: 500rpx;margin-top: 12rpx;margin-right: 20rpx;">
							<view class="padding-chat bg-primary" style="border-radius: 15rpx;">
								<text style="word-break: break-all;">{{x.msg}}</text>
							</view>
							<view class="my-neirong-sm padding-top-sm">
								{{ x.time }}
							</view>
						</view>
						<view class="chat-img flex-row-center">
							<image style="height: 100%;width: 100%;" src="../../static/icon_person.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
				
				<!-- loading是显示 -->
				<view v-show="msgLoad">
					<view class="flex-row-start margin-left margin-top">
						<view class="chat-img flex-row-center">
							<image style="height: 100%;width: 100%;" src="../../static/icon_logo.png" mode="aspectFit"></image>
						</view>
						<view  class="flex"  style="width: 500rpx;margin-left: 20rpx;">
							<view class="margin-left padding-chat flex-column-start" 
							style="border-radius: 35rpx;background-color: #f9f9f9;">
								<uni-icons class="turn-load" type="reload" size="20" color="#007AFF"></uni-icons>
							</view>
						</view>	
					</view>
				</view>
				<!-- 防止消息底部被遮 -->
				<view>
					<view style="height: 65px;"></view>
					<view class="safH" v-if="saf" style="background-color: transparent;"></view>
				</view>
			</view>
		</scroll-view>
		<!-- 底部导航栏 -->
		<view class="flex-column-center" style="position: fixed;bottom: 0px;width: 100%" :animation="animationData">
			<view class="check-list">
				<view class="check-list-item" v-for="(item, index) in problemKeyList" :key="index" @click="onCheckClick(index)">
					<view v-html="item"></view>
				</view>
			</view>
			<view class="bottom-dh-char flex-row-around">
				<input v-model="msg" class="dh-input" :cursor-spacing="cursorSpacing" type="text"
					style="background-color: #f0f0f0;" @confirm="sendMsg" confirm-type="search" @input="msgInput" placeholder-class="placeholder-sm"
					placeholder="请输入您要查询的问题" />
				<view @click="sendMsg" class="send-btn bg-primary">
					发送
				</view>
			</view>
			<view class="safH" v-if="saf"></view>
		</view>
		
		<!-- <uni-popup ref="problemDetail" type="bottom" background-color="#fff" borderRadius="10px 10px 0 0" :safe-area="false">
			<view style="height: 90vh;padding: 20rpx;">
				<view style="font-size: 28rpx;font-weight: bold;line-height: 60rpx;">
					{{ problemDetail.problem }}
				</view>
				<view style="font-size: 24rpx;color: #999;line-height: 50rpx;">
					{{ problemDetail.profile }}
				</view>
				<scroll-view class="border-top" scroll-y style="height: calc(90vh - 150rpx);">
					<u-parse :content="problemDetail.way" ></u-parse>
				</scroll-view>
			</view>
		</uni-popup> -->
	</view>
</template>

<script>
	import throttle from '@/common/helper/throttle.js'
	import dayjs from 'dayjs';
	// rpx和px的比率
	var l
	// 可用窗口高度
	var wh
	// 顶部空盒子的高度
	var mgUpHeight
	var screenHeight
	export default {
		data() {
			return {
				animationData: {},
				go: 0,
				srcollHeight: 0,
				cursorSpacing: 30, // 光标和软键盘距离
				anData: {},
				msg: "",
				
				msgTemplate: {
					title: "亲爱的客户，请问您想咨询的问题是以下问题吗?",
					problemTypeList: []
				},
				
				
				msgList: [],
				
				msgLoad: false,
				checkList: [],
				
				saf: true, // 是否显示底部安全距离
				
				problemTypePage: {
					pageNum: 1,
					pageSize: 5,
					pages: 0
				},
				problemPage: {
					pageNum: 1,
					pageSize: 5
				},
				problemList: [],
				problemKeyList: [],
				
				problemDetail: {},
				
				serviceInfo: {
					isShow: false
				}
			}
		},
		onLoad() {
			// 如果需要缓存消息缓存msgList即可
			// 监听键盘拉起
			// 因为无法控制键盘拉起的速度,所以这里尽量以慢速处理
			uni.onKeyboardHeightChange(res => {
				this.saf = res.height == 0
				const query = uni.createSelectorQuery()
				query.select('#okk').boundingClientRect(data => {
					// 若消息体没有超过2倍的键盘则向下移动差值,防止遮住消息体
					// var up = res.height * 2 - data.height - l * 110
					var up = res.height * 2 - data.height
					if (up > 0) {
						// 动态改变空盒子高度
						// this.msgMove(up, 300)
						this.msgMove(up > res.height ? res.height : up, 300)
						// 记录改变的值,若不收回键盘且发送了消息用来防止消息过多被遮盖
						mgUpHeight = up > res.height ? res.height : up
					}
					// 收回
					if (res.height == 0) {
						this.msgMove(0, 0)
						mgUpHeight = 0
					}
				}).exec();
			})
			var query = uni.getSystemInfoSync()
			let safeArea = query.safeArea;
			screenHeight = query.screenHeight;
			let safeAreaBottom = screenHeight - safeArea.bottom;
			
			l = query.screenWidth / 750
			wh = query.windowHeight
			this.srcollHeight = query.windowHeight + "px"
			
			this.getProblemTypeList()
		},
		methods: {
			// 切换输入法时移动输入框(按照官方的上推页面的原理应该会自动适应不同的键盘高度-->官方bug)
			goPag(kh) {
				this.upTowmn(0, 250)
				if (this.keyHeight != 0) {
					if (kh - this.keyHeight > 0) {
						this.upTowmn(this.keyHeight - kh, 250)
					}

				}
			},
			sendMsg(){
				// 消息为空不做任何操作
				if(this.msg==""){
					return 0;
				}
				// 显示消息 msg消息文本,my鉴别是谁发的消息(不能用俩个消息数组循环,否则消息不会穿插)
				this.msgList.push({"msg":this.msg,"my":true,"time": dayjs().format("MM.DD HH:mm"),})				
				// 保证消息可见
				this.msgGo()
				// 回答问题
				this.msgKf(this.msg)
				// 清除消息
				this.msg=""
				// 消除消息提示
				this.problemKeyList = []
			},
			msgKf(x){
				// loading
				this.msgLoad=true
				// 这里连接服务器获取答案
				this.getProblemKeyList(1, 5, x).then(async res => {
					console.log(res)
					if (res && res.list.length > 0) {
						// let list = res.list[0].problem == this.msg ? res.list[0] : res.list
						this.msgLoad = false
						this.msgList.push({
							my: false,
							type: 1,
							list: res.list,
							time: dayjs().format("MM.DD HH:mm"),
							keyword: x,
							pageNum: 1,
							pageSize: 5,
							pages: res.pages
						})
					} else {
						await this.getServiceInfo()
						this.msgLoad = false
						this.msgList.push({
							my: false,
							type: 2,
							time: dayjs().format("MM.DD HH:mm"),
							serviceInfo: this.serviceInfo
						})
					}
					this.msgGo()
				})
				// 下面模拟请求
				// setTimeout(()=>{
				// 	// 取消loading
				// 	this.msgLoad=false
				// 	this.msgList.push({my:false,type:0})
				// 	this.msgGo()
				// },2000)
			},
			hideKey() {
				uni.hideKeyboard()
			},
			// 保持消息体可见
			msgGo(){
				const query = uni.createSelectorQuery()
				// 延时100ms保证是最新的高度
				setTimeout(()=>{
					// 获取消息体高度
					query.select('#okk').boundingClientRect(data => {
					   // 如果超过scorll高度就滚动scorll
					   if(data.height-wh>0){
						   this.go=data.height-wh
						   
					   }
						 console.log(wh)
						 console.log(data.height)
					   // 保证键盘第一次拉起时消息体能保持可见
					   var moveY=wh-data.height
					   // 超出页面则缩回空盒子
					   if(moveY-mgUpHeight<0){
						   // 小于0则视为0
						   if(moveY<0){
							   this.msgMove(0,200)
						   }else{
							   // 否则缩回盒子对应的高度
							  this.msgMove(moveY,200) 
						   }					   
					   }
						
					}).exec();
				},100)
			},
			async msgInput(e) {
				throttle(async () => {
					try{
						// let val = e.detail.value
						let val = this.msg
						if (!val || !val.trim()) {
							this.problemList = []
							this.problemKeyList = []
							return
						}
						let data = await this.getProblemKeyList(1, 5, val)
						let list = data ? data.list : []
						this.problemList = list
						this.problemKeyList = list.map(item => {
							const words = item.problem.split('')
							const keys = val.trim().replace(/\s*/g, '').split('')
							let text = ""
							keys.forEach(key => {
								for (let i = 0; i < words.length; i++) {
									if (words[i] === key) {
										words[i] = `<span style="color: red;">${key}</span>`
									}
								}
								text = words.join('')
							})
							text = `<div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100%">${text}</div>`
							return text
						})
					}catch(e){
						//TODO handle the exception
					}
				}, 500, false)
			},
			onCheckClick(index) {
				this.msg = this.problemList[index].problem
				this.problemKeyList = []
				this.problemList = []
			},
			// 移动顶部的空盒子
			msgMove(x, t) {
				var animation = uni.createAnimation({
					duration: t,
					timingFunction: 'linear',
				})

				this.animation = animation

				animation.height(x).step()

				this.anData = animation.export()
				console.log(this.anData)
			},
			// 查看问题详情
			toDetail(problem) {
				console.log(problem)
				// this.problemDetail = problem
				// this.$refs.problemDetail.open()
				uni.navigateTo({
					url: "/pages/service/problemDetail?id=" + problem.id
				})
			},
			async answer(item) {
				this.getProblemList(1, 5, item.type).then(async res => {
					if (res && res.list.length > 0) {
						this.msgLoad = false
						this.msgList.push({
							my: false,
							type: 1,
							list: res.list,
							time: dayjs().format("MM.DD HH:mm"),
							problemType: item.type,
							pageNum: 1,
							pageSize: 5,
							pages: res.pages
						})
					} else {
						await this.getServiceInfo()
						this.msgLoad = false
						this.msgList.push({
							my: false,
							type: 2,
							time: dayjs().format("MM.DD HH:mm"),
							serviceInfo: this.serviceInfo
						})
					}
					this.msgGo()
				})
			},
			onProblem(item) {
				this.msgList.push({
					my: false,
					type: 0,
					list: [item],
					time: dayjs().format("MM.DD HH:mm"),
				})
				this.msgGo()
			},
			// 问题类型
			getProblemTypeList() {
				const that = this
				that.wxRequest({
					url: `${that.API}/enterpriseUser/listCommonProblemType`,
					method: 'post',
					data: {
						pageNum: that.problemTypePage.pageNum,
						pageSize: that.problemTypePage.pageSize
					},
					success: (res) => {
						console.log(res)
						if (that.problemTypePage.pageNum == 1) {
							that.msgTemplate.problemTypeList = []
						}
						if (res.data.data) {
							if (that.problemTypePage.pageNum == res.data.data.pages && that.problemTypePage.pageNum > 1) {
								// 最后一页不足5条，请求第一页补全
								that.wxRequest({
									url: `${that.API}/enterpriseUser/listCommonProblemType`,
									method: 'post',
									data: {
										pageNum: 1,
										pageSize: that.problemTypePage.pageSize - res.data.data.list.length
									},
									success: (ret) => {
										console.log(ret)
										if (ret.data.data) {
											that.msgTemplate.problemTypeList = [...res.data.data.list, ...ret.data.data.list]
										}
									}
								})
							} else {
								that.msgTemplate.problemTypeList = res.data.data.list
							}
							that.problemTypePage.pages = res.data.data.pages
						}
					}
				})
			},
			problemTypePageChange() {
				console.log(this.problemTypePage)
				if (this.problemTypePage.pageNum < this.problemTypePage.pages) {
					++this.problemTypePage.pageNum
					this.getProblemTypeList()
				} else {
					this.problemTypePage.pageNum = 1
					this.problemTypePage.pageSize = 5
					this.getProblemTypeList()
				}
			},
			getProblemKeyList(pageNum, pageSize, problem) {
				console.log(problem)
				return new Promise((resolve, reject) => {
					const that = this
					that.wxRequest({
						url: `${that.API}/enterpriseUser/listCommonProblemWord`,
						method: 'post',
						data: {
							problem: problem ? problem : '',
							pageNum: pageNum,
							pageSize: pageSize
						},
						success: (res) => {
							console.log(res)
							resolve(res.data.data)
						},
						fail: (err) => {
							reject(err)
						}
					})
				})
			},
			getProblemList(pageNum, pageSize, type) {
				return new Promise((resolve, reject) => {
					const that = this
					that.wxRequest({
						url: `${that.API}/enterpriseUser/listCommonProblem`,
						method: 'post',
						data: {
							type: type,
							pageNum: pageNum,
							pageSize: pageSize
						},
						success: (res) => {
							console.log(res)
							resolve(res.data.data)
						},
						fail: (err) => {
							reject(err)
						}
					})
				})
			},
			problemPageChange(item, index) {
				if (item.keyword) {
					if (item.pageNum < item.pages) {
						++this.msgList[index].pageNum
						this.getProblemKeyList(this.msgList[index].pageNum, 5, item.keyword).then(res => {
							if (res && res.list.length) {
								if (this.msgList[index].pageNum == res.pages && this.msgList[index].pageNum > 1) {
									this.getProblemKeyList(1, 5 - res.list.length, item.keyword).then(ret => {
										if (ret && ret.list.length) {
											this.msgList[index].list = [...res.list, ...ret.list]
										}
									})
								} else {
									this.msgList[index].list = res.list
								}
							}
						})
					} else {
						this.msgList[index].pageNum = 1
						this.getProblemKeyList(this.msgList[index].pageNum, 5, item.keyword).then(res => {
							if (res && res.list.length) {
								this.msgList[index].list = res.list
							}
						})
					}
				}
				if (item.problemType) {
					if (item.pageNum < item.pages) {
						++this.msgList[index].pageNum
						this.getProblemList(this.msgList[index].pageNum, 5, item.problemType).then(res => {
							if (res && res.list.length) {
								if (this.msgList[index].pageNum == res.pages && this.msgList[index].pageNum > 1) {
									this.getProblemList(1, 5 - res.list.length, item.problemType).then(ret => {
										if (ret && ret.list.length) {
											this.msgList[index].list = [...res.list, ...ret.list]
										}
									})
								} else {
									this.msgList[index].list = res.list
								}
							}
						})
					} else {
						this.msgList[index].pageNum = 1
						this.getProblemList(this.msgList[index].pageNum, 5, item.problemType).then(res => {
							if (res && res.list.length) {
								this.msgList[index].list = res.list
							}
						})
					}
				}
			},
			getServiceInfo() {
				return new Promise((resolve, reject) => {
					const that = this
					that.wxRequest({
						url: `${that.API}/enterpriseUser/listDic`,
						method: 'post',
						data: {
							etpId: uni.getStorageSync(that.DATA_KEY.etpId)
						},
						success: (res) => {
							if (res.data.data) {
								this.serviceInfo = res.data.data[0]
								resolve()
							} else {
								resolve(false)
							}
						},
						fail: (err) => {
							reject(err)
						},
					})
				})
			},
			onCallPhone() {
				uni.makePhoneCall({
					phoneNumber: this.serviceInfo.customerTel
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		background-color: #f1f1f1;
	}
	.flex {
		display: flex;
	}
	.flex-column {
		display: flex;
		flex-direction: column;
	}
	.justify-end {
		justify-content: flex-end;
	}
	.align-start {
		align-items: flex-start;
	}
	.align-end {
		align-items: flex-end;
	}
	.align-center {
		align-items: center;
	}
	.flex-reverse {
		display: flex;
		flex-direction: row-reverse;
	}
	.flex-column-start {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.flex-column-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.flex-row-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.flex-row-around {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
	
	.flex-row-between {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.flex-row-start {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.my-title {
		font-size: 35rpx;
		font-weight: bold;
	}

	.my-neirong {
		font-size: 26rpx;
		color: #6d6d6d;
	}

	.my-neirong-sm {
		font-size: 23rpx;
		color: #616161;
	}

	.my-tag-text {
		font-size: 22rpx;
		padding-top: 20rpx;
		color: #bababa;
	}

	.padding-top {
		padding-top: 35rpx;
	}

	.padding-top-sm {
		padding-top: 20rpx;
	}
	
	.border-top {
		border-top: 2rpx solid #eee;
	}

	/* 转圈动画 */
	.turn-load {
		animation: turnmy 1s linear infinite;
	}

	@keyframes turnmy {
		0% {
			-webkit-transform: rotate(0deg);
		}

		25% {
			-webkit-transform: rotate(90deg);
		}

		50% {
			-webkit-transform: rotate(180deg);
		}

		75% {
			-webkit-transform: rotate(270deg);
		}

		100% {
			-webkit-transform: rotate(360deg);
		}
	}

	.one-show {
		animation: oneshow 0.8s ease 1;
	}

	@keyframes oneshow {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	.margin-left {
		margin-left: 20rpx;
	}

	.margin-top {
		margin-top: 20rpx;
	}
	.margin-right {
		margin-right: 20rpx;
	}
	.padding-left {
		padding-left: 20rpx;
	}

	.round {
		border-radius: 2600px;
	}

	.bg-primary {
		background-color: #007AFF;
		color: #ffffff;
	}
	.bg-white {
		background-color: #fff;
	}

	.send-btn {
		font-size: 12px;
		vertical-align: middle;
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0px 15px;
		height: 35px;
		border-radius: 35px;
		font-family: Helvetica Neue, Helvetica, sans-serif;
		white-space: nowrap;
	}

	.placeholder-sm {
		font-size: 23rpx;
		color: #616161;
	}

	.bottom-dh-char {
		background-color: #fff;
		width: 750rpx;
		/* height: 110rpx;*/
		padding: 10px 0;
	}

	.center-box {
		width: 720rpx;
		padding-left: 25rpx;
	}

	.hui-box {
		width: 750rpx;
		height: 100%;

	}

	.dh-input {
		width: 560rpx;
		height: 35px;
		border-radius: 10px;
		padding-left: 15rpx;
		background-color: #FFFFFF;
		font-size: 12px;
	}

	.box-normal {
		width: 750rpx;
		height: 180px;
		background-color: #FFFFFF;
	}

	.tb-text view {
		font-size: 65rpx;
	}

	.tb-text text {
		font-size: 25rpx;
		color: #737373;
	}

	.chat-img {
		border-radius: 50%;
		width: 90rpx;
		height: 90rpx;
		background-color: #f7f7f7;
		overflow: hidden;
	}

	.padding-chat {
		padding: 17rpx 20rpx;
	}

	.tb-nv {
		width: 50rpx;
		height: 50rpx;
	}

	.safH {
		width: 100%;
		height: calc(constant(safe-area-inset-bottom) / 3 * 2);
		height: calc(env(safe-area-inset-bottom) / 3 * 2);
		background-color: #fff;
	}
	
	.an-title {
		font-size: 28rpx;
		color: #000;
		word-break: break-all;
	}
	.an-info {
		font-size: 28rpx;
		color: #999;
		padding-top: 20rpx;
		word-break: break-all;
	}
	.an-btn {
		font-size: 24rpx;
		text-align: right;
		color: #007AFF;
		padding-top: 20rpx;
	}
	.check-list {
		background-color: #fff;
		width: 100%;
		text-align: left;
	}
	.check-list-item {
		padding: 10rpx 20rpx;
	}
</style>